<template>
  <div>
    <!-- 笔记 -->
    <div id="notes" class="section lb">
      <div class="container">
        <div class="section-title text-left">
          <h3 class="">笔记</h3>
        </div>
        <div class="note-menu row">
          <div class="col-md-12">
            <div class="button-group filter-button-group text-left">
              <button :class="{ active: 0 === currentNoteKind }" data-filter="*" @click="clickNoteKindAll()">全部</button>
              <button
                v-for="kind in noteKindList"
                :key="kind.id"
                :data-filter="kind.html"
                :class="{ active: kind.id === currentNoteKind }"
                @click="clickNoteKind(kind.id)"
              >
                {{ kind.title }}
              </button>
            </div>
          </div>
        </div>
        <div class="note-list row">
          <div
            v-for="note in noteList"
            :key="note.id"
            class="col-md-4 note-grid"
            :class="note.kind"
          >
            <a :href="note.href" target="_blank">
              <div class="services-inner-box note-single clearfix">
                <div class="ser-icon">
                  <i class="icon iconfont">{{ note.icon }}</i>
                </div>
                <h2>{{ note.title }}</h2>
                <p>
                  来源：<span :href="note.url" @click="noteFrom">{{
                    note.author
                  }}</span>
                </p>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- API -->
    <div id="api" class="section lb">
      <div class="container">
        <div class="section-title text-left">
          <h3 class="">文档</h3>
        </div>
        <div class="api-menu row">
          <div class="col-md-12">
            <div class="button-group filter-button-group text-left">
              <button class="active" data-filter="*">全部</button>
              <button
                v-for="kind in apiKindList"
                :key="kind.id"
                :data-filter="kind.html"
              >
                {{ kind.title }}
              </button>
            </div>
          </div>
        </div>
        <div class="api-list row">
          <div v-for="api in apiList" :key="api.id" class="col-md-4 note-grid">
            <a :href="api.href" target="_blank">
              <div class="services-inner-box note-single clearfix">
                <div class="ser-icon">
                  <i class="icon iconfont">{{ api.icon }}</i>
                </div>
                <h2>{{ api.title }}</h2>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Note",
  data() {
    return {
      noteKindList: [],
      noteList: [],
      apiKindList: [],
      apiList: [],
      currentNoteKind:0,
    };
  },
  methods: {
    // 笔记列表
    getNoteList() {
      this.$http
        .noteList()
        .then((res) => {
          this.noteList = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 笔记分类
    getNoteKindList() {
      this.$http
        .noteKindList()
        .then((res) => {
          this.noteKindList = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 文档列表
    getApiList() {
      this.$http
        .apiList()
        .then((res) => {
          this.apiList = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 文档分类
    getApiKindList() {
      this.$http
        .apiKindList()
        .then((res) => {
          this.apiKindList = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 笔记来源超链接
    noteFrom() {
      event.stopPropagation(); // 阻止点击事件冒泡
      event.preventDefault(); // 清除a标签默认事件
      // let href = $(this).attr("href");
      console.log($(this));
      // window.open(href); // 点击跳转来源页面
    },
    clickNoteKind(index){
      this.currentNoteKind = index;
    },
    clickNoteKindAll(){
      this.currentNoteKind = 0;
    }
  },
  // 生命周期  在created方法发起ajax请求
  created() {
    // 返回一个Axios实例化对象
    this.getNoteList();
    this.getNoteKindList();
    this.getApiList();
    this.getApiKindList();
  },
};
// 笔记分类
// let $container = $(".container");
// $container.imagesLoaded(function () {
//   let portfolio = $(".note-menu");
//   portfolio.on("click", "button", function () {
//     $(this).addClass("active").siblings().removeClass("active");
//     let filterValue = $(this).attr("data-filter");
//     $grid.isotope({
//       filter: filterValue,
//     });
//   });
//   let $grid = $(".note-list").isotope({
//     itemSelector: ".note-grid",
//   });
// });
// API分类
// $container.imagesLoaded(function () {
//   let portfolio = $(".api-menu");
//   portfolio.on("click", "button", function () {
//     $(this).addClass("active").siblings().removeClass("active");
//     let filterValue = $(this).attr("data-filter");
//     $grid.isotope({
//       filter: filterValue,
//     });
//   });
//   let $grid = $(".api-list").isotope({
//     itemSelector: ".api-grid",
//   });
// });
</script>

<style lang="css" scoped>
.note-single {
  margin: 30px 0 8px;
}
.api-single {
  margin: 30px 0 8px;
}
#api {
  padding-top: 0;
}
</style>
